<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" size="mini" @click="delAll">批量删除</el-button>
        <el-input v-model="select_word" size="mini" placeholder="请输入歌手名字" class="handle-input"></el-input>
        <el-button type="primary" size="mini" @click="centerDialogVisible=true">添加歌手</el-button>
      </div>
    </div>
    <el-table size="mini" border style="width: 100%" height="500px" :data="data" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="40"  ></el-table-column>
      <el-table-column label="歌手图片" width="110" align="center">
        <template slot-scope="scope"><!--scope当前的单元格-->
          <div class="singer-img">
            <img :src="getUrl(scope.row.pic)" style="width:100%"   alt=""/>
          </div>
          <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload"  :on-success="handleAvatorSuccess">
            <el-button size="mini">更新图片</el-button>

          </el-upload>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="歌手名字" width="120px" align="center">

      </el-table-column>
      <el-table-column prop="sex" label="性别" width="50px" align="center">
        <template slot-scope="scope"><!--scope当前的单元格-->
          {{changeSex(scope.row.sex)}}
        </template>
      </el-table-column>
      <el-table-column prop="birth" label="歌手生日" width="120px" align="center">
        <template slot-scope="scope"><!--scope当前的单元格-->
          {{attachBirth(scope.row.birth)}}
        </template>
      </el-table-column>
      <el-table-column prop="location" label="歌手地区" width="120px" align="center">

      </el-table-column>
      <el-table-column prop="introduction" label="歌手简介"  width="120px" align="center">

      </el-table-column>

      <el-table-column   label="歌曲管理"  width="120px" align="center">
       <template slot-scope="scope">
         <el-button size="mini" @click="songEdit(scope.row.id,scope.row.name)">歌曲管理</el-button>
       </template>
      </el-table-column>

      <el-table-column  label="操作"  width="150px" align="center">
        <template slot-scope="scope"><!--scope当前的单元格-->
          <el-button size="mini" @click="handlEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handldelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog title="添加歌手" :visible.sync="centerDialogVisible" width="400px" center>
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="name" lable="歌手名" size="mini">
          <el-input v-model="registerForm.name" placeholder="歌手名"></el-input>
        </el-form-item>
        <el-form-item prop="sex" lable="歌手性别" size="mini">
          <el-input v-model="registerForm.sex" placeholder="歌手性别"></el-input>
          <el-radio-group v-model="registerForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
            <el-radio :label="2">组合</el-radio>
            <el-radio :label="3">不明</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="birth" lable="歌手生日" size="mini">
          <el-date-picker type="date" v-model="registerForm.birth" placeholder="选择时间"></el-date-picker>
        </el-form-item>
        <el-form-item prop="location" lable="歌手地区" size="mini">
          <el-input v-model="registerForm.location" placeholder="歌手地区"></el-input>
        </el-form-item>
        <el-form-item prop="introduction" lable="歌手简介" size="mini">
          <el-input v-model="registerForm.introduction" placeholder="歌手简介" style="height: 100px;overflow: scroll" type="textarea" ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="centerDialogVisible=false" >取消</el-button>
      <el-button type="primary" size="mini" @click="addSinger" >确定</el-button>
    </el-dialog>

    <el-dialog title="编辑歌手" :visible.sync="editVisible" width="400px" center>
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item prop="name" lable="歌手名" size="mini">
          <el-input v-model="editForm.name" placeholder="歌手名"></el-input>
        </el-form-item>
        <el-form-item prop="sex" lable="歌手性别" size="mini">
          <el-input v-model="editForm.sex" placeholder="歌手性别"></el-input>
          <el-radio-group v-model="editForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
            <el-radio :label="2">组合</el-radio>
            <el-radio :label="3">不明</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item lable="歌手生日" size="mini">
          <el-date-picker type="date" v-model="editForm.birth" placeholder="选择时间"></el-date-picker>
        </el-form-item>
        <el-form-item prop="location" lable="歌手地区" size="mini">
          <el-input v-model="editForm.location" placeholder="歌手地区"></el-input>
        </el-form-item>
        <el-form-item prop="introduction" lable="歌手简介" size="mini">
          <el-input v-model="editForm.introduction" placeholder="歌手简介" style="height: 100px;overflow: scroll" type="textarea" ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="editVisible=false" >取消</el-button>
      <el-button type="primary" size="mini" @click="edit1Singer" >确定</el-button>
    </el-dialog>
    <el-dialog title="删除歌手" :visible.sync="deleteVisible" width="400px" center>
       <div align="center">数据删除将不能恢复！确认删除?</div>
      <slot slot="footer">
      <el-button type="primary" size="mini" @click="deleteVisible=false" >取消</el-button>
      <el-button type="danger" size="mini" @click="delete1Singer" >确定</el-button>
      </slot>
    </el-dialog>

  </div>
</template>


<script>
import {getAllSinger, setSinger} from '../api/index';

import {mixin} from "../mixins";
import {deleteSinger, editSinger} from "../api";

export default {
  name: "Singer",
  mixins:[mixin],
  data(){
    return{
      centerDialogVisible:false,
      editVisible:false,
      deleteVisible:false,//删除弹框
      registerForm:{//添加框
        name:'',
        sex:'',
        birth:'',
        location :'',
        introduction:''
      },
      editForm:{//编辑框
        id:'',
        name:'',
        sex:'',
        birth:'',
        location :'',
        introduction:''
      },
      tableData: [],
      select_word:'',
      tempData:[],
      gridIndex:-1,
      pageSize:5,//分页大小
      currentPage:1,//当前页,
      multipleSelection:[]//打钩的项多选
    }
  },

computed:{
  data(){
    return this.tableData.slice((this.currentPage-1) * this.pageSize,this.currentPage*this.pageSize)
  }
}  ,
  watch:{
    select_word:function () {
      if(this.select_word===''){
        this.tableData=this.tempData;
      }else {
        this.tableData=[];
        for (let item of this.tempData){
          if(item.name.includes(this.select_word)){
            this.tableData.push(item)

          }
        }
      }
    }
  },
  created() {
    this.getData();
  },
  methods:{
    handleSelectionChange(val){
      this.multipleSelection=val;
    },

    handleCurrentChange(val){
      this.currentPage=val;
    },
    getData(){
      this.tableData=[];
      this.tempData=[];
      getAllSinger().then(res=>{/*res是查询返回的值*/
        this.tableData=res;/*把查询返回的res的值赋值给tableData*/
        this.tempData=res;
        console.log(res)
      })
    },
    addSinger(){
      let d=this.registerForm.birth;//获取到对话框的日期
      let datetime=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDay();
      alert(datetime);
      let params=new URLSearchParams();
      params.append('name',this.registerForm.name);
      params.append('sex',this.registerForm.sex);
      params.append('pic','/img/singerPic/hhh.jpg');
      params.append('birth',d);
      params.append('location',this.registerForm.location);
      params.append('introduction',this.registerForm.introduction);
      setSinger(params).then(res=>{
        this.getData();
        if(res.code==1){
          this.notify("添加成功","success");
        }else{
          this.notify("添加失败","error");
        }
      }).catch(err=>{
        console.log(err);
      });
      this.centerDialogVisible=false;
    },
    edit1Singer(){
      let d=new Date(Date.parse(this.editForm.birth));//获取到对话框的日期

      let datetime=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
      alert(datetime);
      let params=new URLSearchParams();
      params.append('id',this.editForm.id);
      params.append('name',this.editForm.name);
      params.append('sex',this.editForm.sex);
      params.append('birth',datetime);
      params.append('location',this.editForm.location);
      params.append('introduction',this.editForm.introduction);
      editSinger(params).then(res=>{
        this.getData();
        if(res.code==1){
          this.notify("修改成功","success");
        }else{
          this.notify("修改失败","error");
        }
      }).catch(err=>{
        console.log(err);
      });
      this.editVisible=false;
    },
    //删除用户
    delete1Singer(){
      deleteSinger(this.gridIndex).then(res=>{
        this.getData();
        if(res){
          this.notify("删除成功","success");
        }else{
          this.notify("删除失败","error");
        }
      }).catch(err=>{
        console.log(err);
      });
      this.deleteVisible=false;

    },

    delAll(){
      for(let item of this.multipleSelection){
        this.handldelete(item.id);
        this.delete1Singer();
      }

      this.multipleSelection=[];
    },
    //更新图片
    uploadUrl(id){
      return `${this.$store.state.HOST}/singer/updateSigerPic?id=${id}`
    },
    handlEdit(row){
       this.editVisible=true;
        this.editForm={
          id:row.id,
          name:row.name,
          sex:row.sex,
          birth:row.birth,
          location:row.location,
          introduction:row.introduction
      }

    },
//转向歌曲页面
    songEdit(id,name){
      this.$router.push({path:`/Song`,query:{id,name}});
    }



  }
}
</script>

<style scoped>
.handle-box{
  margin-bottom: 20px;
}
.singer-img{
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}

.pagination{
  display: flex;
  justify-content: center;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
</style>
